<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>

            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: DM Spiral</h1>


        <script id='csmove' type='text/x-cindyscript'>
            fillcircle((0,0),30,color->(0,0,0));

            m=map(A,B,C,D);
            l=[A.homog,B.homog,D.homog,C.homog,A.homog];
            n(x):=x/|x|;
            s=X.x;
            mm=round(X.y*4);
            repeat(200,i,
                   fillpoly(l,color->hue((i-1)/mm+s),alpha->0.9);
                   // connect(l,color->(0,0,0));
                   l=apply(l,n(m*#));
                   );


        </script>

        <div  id="CSCanvas" style="width:500px; height:500px; border:2px solid #000000"></div>

        <script type="text/javascript">

            var gslp=[
                      {name:"A", kind:"P", type:"Free", pos:[-7,-3,1],size:4,color:[1,1,1]},
                      {name:"B", kind:"P", type:"Free", pos:[-2,-3,1],size:4,color:[1,1,1]},
                      {name:"D", kind:"P", type:"Free", pos:[-1,0,1],size:4,color:[1,1,1]},
                      {name:"C", kind:"P", type:"Free", pos:[-5,2,1],size:4,color:[1,1,1]},
                      {name:"X", kind:"P", type:"Free", pos:[-8,8,1],size:4,color:[1,0,0]}
                      ];



            CindyJS({canvasname:"CSCanvas",
                        movescript:"csmove",
                        geometry:gslp});





            </script>



	</body>
</html>
